<template>
    <div class="modal-container">
      <el-dialog title="操作提示" width="900px" custom-class="cus-modal-wrap" :close-on-click-modal="true"
        :visible.sync="show_modal" :before-close="onbeforeclose" @closed="onclosed">
        <div class="modal-inner">
          <div style="display: flex;">
            <div class="info-content">
              <div class="info-item">
                <div class="label">订单编号：</div>
                <div class="val">
                 舒服
                </div>
              </div>
              <div class="info-item">
                <div class="label">所属公司：</div>
                <div class="val">1233444</div>
              </div>
              <div class="info-item">
                <div class="label">配送单号：</div>
                <div class="val">2025-01-10</div>
              </div>
            </div>
            <div class="info-content">
              <div class="info-item">
                <div class="label">客户姓名：</div>
                <div class="val">
                 舒服
                </div>
              </div>
              <div class="info-item">
                <div class="label">下单时间：</div>
                <div class="val">1233444</div>
              </div>
              <div class="info-item">
                <div class="label">发货时间：</div>
                <div class="val">2025-01-10</div>
              </div>
            </div>
          </div>
          <div class="table-header mt20">
            <div class="table-cell1">序号</div>
            <div  class="table-cell2">产品编号</div>
            <div  class="table-cell3">商品名称</div>
            <div class="table-cell4">应发数量</div>
            <div  class="table-cell5">实发数量</div>
            <div  class="table-cell6">应退金额</div>
          </div>
          <div class="table-body">
            <div class="table-cell1">序号</div>
            <div  class="table-cell2">产品编号</div>
            <div  class="table-cell3">商品名称</div>
            <div class="table-cell4">应发数量</div>
            <div  class="table-cell5">实发数量</div>
            <div  class="table-cell6">应退金额</div>
          </div>
          <div class="table-body">
            <div class="table-cell1">序号</div>
            <div  class="table-cell2">产品编号</div>
            <div  class="table-cell3">商品名称</div>
            <div class="table-cell4">应发数量</div>
            <div  class="table-cell5">实发数量</div>
            <div  class="table-cell6">应退金额</div>
          </div>
          <div class="table-header">
            <div class="table-cell1">合计</div>
            <div  class="table-cell2"></div>
            <div  class="table-cell3"></div>
            <div class="table-cell4" style="color: #333333;">应发数量</div>
            <div  class="table-cell5"  style="color: #333333;">实发数量</div>
            <div  class="table-cell6"  style="color: #EF1F1F;"> 应退金额</div>
          </div>


          
        </div>
        <span slot="footer" class="dialog-footer">
          <button class="btn btn-ripple fit-text btn-1" @click="show_modal = false">取消</button>
          <el-button class="btn btn-ripple fit-text btn-2 btn-bg" @click="throttle_do_confirm()"  :loading="loading">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { mapState } from "vuex";
  
  export default {
    name: "order-cancel-modal",
    components: {},
    // props: [""],
    data() {
      return {
        show_modal: false,
        info: {},
        loading: false,
      };
    },
    computed: {
      ...mapState([""]),
      // imgs() {
      //   let imgs = [];
      //   if (this.info && this.info.products) {
      //     imgs = this.info.products.map(v => v.image);
      //   }
      //   return imgs;
      // }
    },
    watch: {},
    created() {
      this.throttle_do_confirm = this.mix_throttle(this.do_confirm, 1500)
    },
    methods: {
      init(info) {
        this.info = info;
        this.show_modal = true;
      },
      onbeforeclose() {
        this.show_modal = false;
      },
      onclosed() {
        // this.show_modal = false;
      },
      throttle_do_confirm() {
  
      },
      do_confirm() {
        this.loading = true;
        this.$api({
          url: '/service.php',
          method: 'get',
          data: {
            action: 'orders_del',
            id: this.info.id
          },
        }).then((res) => {
          alert(res).then(() => {
            this.loading = false;
          });
          if (res.code == 200) {
            this.$emit('confirm')
            this.show_modal  = false;
          }
        });
      }
    }
  };
  </script>
  
  <style scoped lang="less">
    .table-header{
      width: 800px;
    height: 50px;
    background: #F5F5F5;
    font-weight: 400;
font-size: 14px;
color: #666666;
padding-left: 10px;
padding-right: 10px;
display: flex;
    align-items: center;

    }

    .mt20{
      margin-top: 20px;
    }

    .table-cell1{
      padding-left: 10px;
      width: 10%;
    }
    .table-cell2{
      width: 25%;
    }
    .table-cell3{
      width: 25%;
    }
    .table-cell4{
      width: 12%;
    }
    .table-cell5{
      width: 12%;
    }
    .table-cell6{
      width: 12%;
      padding-right: 10px;
    }

    .table-body{
      width: 800px;
    height: 52px;
    background: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 52px;
    color: #333333;
padding-left: 10px;
padding-right: 10px;
display: flex;
    align-items: center;
    }

  /deep/ .el-dialog__header {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    background: #F7F7F7;
  
    font-family: Poppins, Poppins;
    // font-weight: 600;
    font-size: 18px;
    color: #333333;
  
    .el-dialog__close {
      font-size: 20px;
    }
  }
  
  /deep/ .el-dialog__body {
    padding: 34px 60px 53px;
  }
  
  /deep/ .el-dialog__footer {
    padding-bottom: 60px;
  
    button {
      width: 120px;
      height: 32px;
      background: #FFFFFF;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #D5DBE8;
  
      font-family: Arial, Arial;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
  
      & + button {
        margin-left: 16px;
      }
    }
  
    .btn-1 {
    
    }
  
    .btn-2 {
    
    }
  
    .btn-bg {
      background: #044FA0;
      color: #fff;
    }
  }
  
  .cus-modal-wrap {
    .modal-inner {
      padding: 0;
      text-align: center;
  
      .img-list {
        .img-box {
          margin: 0 10px;
          width: 120px;
          height: 120px;
  
          img {
            width: 120px;
            height: 120px;
            object-fit: cover;
          }
        }
      }
  
      .text-box {
        margin-top: 20px;
        flex: 2;
        text-align: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        // font-weight: bold;
        line-height: 20px;
        color: #333333;
  
        img {
          width: 25px;
          margin-right: 10px;
        }
      }
    }
  }

  .info-content {
        min-height: 20px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: #666;

        > div {
          margin-bottom: 5px;

          span {
            display: inline-block;
            // min-width: 80px;
          }
        }

        .info-item {
          display: flex;
          margin-bottom: 5px;

          .label {
            margin-right: 10px;
            width: fit-content;
          }

          .val {
            flex: 1;
          }
        }
      }
  </style>
  